<script lang="ts" setup>
import type { Honor01ComponentMeta } from '@/definitions/type'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { useCompStyle } from '@/hooks/useCompStyle'
import { useUpload } from '@/hooks/useUpload'
import { withPublicPath } from '@/utils/publicPath'
import { PlusOutlined } from '@ant-design/icons-vue'
import { Button, Input, RadioButton, RadioGroup } from 'ant-design-vue'
import { ref } from 'vue'

defineOptions({
  name: 'Honor01Attr',
  inheritAttrs: true,
})
const { activeRender } = useCompStyle<Honor01ComponentMeta>()
const curIndex = ref(0)

const uploadOpts: Parameters<typeof useUpload>['0'] = {
  successHandler({ url }) {
    activeRender.value!.config.items![curIndex.value].picture = url
  },
}

const { uploadAction: uploadImage } = useUpload(uploadOpts)
function handleUpload(index: number) {
  curIndex.value = index
  uploadImage()
}

// 删除
function handleDelectItem(index: number) {
  activeRender.value!.config.items!.splice(index, 1)
}
// 添加
function handleAddItem() {
  const item = {
    title: '',
    description: '',
    picture: '',
  } as any
  activeRender.value!.config.items?.push(item)
}
function handleUpItem(index: number) {
  if (index > 0) { // 确保不是第一个元素
    const temp = activeRender.value!.config.items![index]
    activeRender.value!.config.items!.splice(index, 1)
    activeRender.value!.config.items!.splice(index - 1, 0, temp)
  }
}
function handleDownItem(index: number) {
  if (index < activeRender.value!.config.items!.length - 1) {
    const temp = activeRender.value!.config.items![index]
    activeRender.value!.config.items!.splice(index, 1)
    activeRender.value!.config.items!.splice(index + 1, 0, temp)
  }
}
</script>

<template>
  <div v-if="activeRender">
    <div class="mb-6">
      <div class="field-title">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="field-title">
      组件内容
    </div>
    <div class="honner-content">
      <div v-for="(item, index) in activeRender.config.items" :key="item.id" class="field-box">
        <div class="field-control-row">
          <div class="field-label">
            荣誉照片
          </div>
          <div
            class=" w-80px h-80px border border-solid border-[var(--app-color-border)] rounded"
            @click="handleUpload(index)"
          >
            <div v-if="item.picture" class="relative group w-full h-full">
              <span
                class="hidden group-hover:flex justify-center items-center absolute top-0 w-full h-full cursor-pointer bg-[rgba(0,0,0,0.5)] text-white"
              >重新上传</span>
              <img :src="item.picture" :width="80" :height="80" class="w-full h-full object-cover">
            </div>
            <div v-else class="w-full h-full flex justify-center items-center">
              <img
                :src="withPublicPath('/images/upload-placeholder.png')" :width="32" :height="32"
                class="w-32px h-32px"
              >
            </div>
          </div>
        </div>
        <div class="field-control-row">
          <div class="field-label">
            荣誉标题
          </div>
          <Input
            v-model:value="item.title" :placeholder="item.titleRules?.placeholder ?? '请输入标题'"
            :min-length="item.titleRules?.min" :max-length="item.titleRules?.max"
            :required="item.titleRules?.required"
          />
        </div>
        <div class="field-control-row">
          <div class="field-label">
            荣誉描述
          </div>
          <Input
            v-model:value="item.description" :placeholder="item.descriptionRules?.placeholder ?? '请输入描述(选填)'"
            :min-length="item.descriptionRules?.min" :max-length="item.descriptionRules?.max"
            :required="item.descriptionRules?.required"
          />
        </div>
        <div class="option-box">
          <i
            v-if="activeRender.config.items!.length !== 1" class="iconfont icon-bianjiqi_shanchu"
            @click="handleDelectItem(index)"
          />
          <i v-if="index !== 0" class="iconfont icon-bianjiqi_shangyi" @click="handleUpItem(index)" />
          <i
            v-if="index !== activeRender.config.items!.length - 1" class="iconfont icon-bianjiqi_xiayi"
            @click="handleDownItem(index)"
          />
        </div>
      </div>
      <Button size="large" style="width: 100%" type="primary" ghost @click="handleAddItem">
        <template #icon>
          <PlusOutlined />
        </template> 添加荣誉
      </Button>
    </div>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.field-title {
  color: var(--app-text-color-main);
  @apply font-bold text-sm mb-14px;
}

.honner-content {
  @apply flex flex-col gap-3 w-full;

  .field-box {
    @apply flex flex-col py-5 px-14px bg-[#FAFAFF] rounded mr-3 relative;
    gap: 12px;

    .field-control {
      color: var(--app-text-color-main);
      @apply flex flex-col gap-2;

      .field-label {
        color: var(--app-text-color-second);
        @apply text-sm whitespace-nowrap;
      }
    }

    .field-control-row {
      color: var(--app-text-color-main);
      @apply flex flex-row gap-2;

      .field-label {
        color: var(--app-text-color-second);
        @apply text-sm whitespace-nowrap mt-1.5;
      }
    }

    .option-box {
      @apply flex flex-col gap-1.5 absolute top-0 -right-8 text-[#999];

      .iconfont {
        @apply text-2xl leading-6 cursor-pointer;
      }
    }
  }
}
</style>
